<template>
  <text :class="classObj.wrapper" @click.stop="handleClick">
    <text
      :class="[classObj.input, {'is-indeterminate': indeterminate, 'is-checked': checked, 'is-disabled': disabled}]">
      <text :class="classObj.inner"></text>
    </text>
  </text>
</template>

<script>
  export default {
    data() {
      return {
        classObj: {}
      }
    },

    props: {
      type: {
        type: String,
        validator(t) {
          return t === 'radio' || t === 'checkbox'
        }
      },
      checked: Boolean,
      disabled: Boolean,
      indeterminate: Boolean
    },

    created() {
      this.classObj = {
        wrapper: `ly-${this.type}`,
        input: `ly-${this.type}__input`,
        inner: `ly-${this.type}__inner`
      }
    },

    methods: {
      handleClick() {
        this.$emit('check', this.checked);
      }
    }
  }
</script>

<style>
  /* lyRadio/lyCheckbox-start */
  .ly-checkbox,
  .ly-radio {
    color: #606266;
    font-weight: 500;
    font-size: 2.8rem;
    cursor: pointer;
    user-select: none;
    padding-right: 1.6rem
  }

  .ly-checkbox__input,
  .ly-radio__input {
    cursor: pointer;
    outline: 0;
    line-height: 1;
    vertical-align: middle
  }

  .ly-checkbox__input.is-disabled .ly-checkbox__inner,
  .ly-radio__input.is-disabled .ly-radio__inner {
    background-color: #edf2fc;
    border-color: #DCDFE6;
    cursor: not-allowed
  }

  .ly-checkbox__input.is-disabled .ly-checkbox__inner::after,
  .ly-radio__input.is-disabled .ly-radio__inner::after {
    cursor: not-allowed;
    border-color: #C0C4CC
  }

  .ly-checkbox__input.is-disabled .ly-checkbox__inner+.ly-checkbox__label,
  .ly-radio__input.is-disabled .ly-radio__inner+.ly-radio__label {
    cursor: not-allowed
  }

  .ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner,
  .ly-radio__input.is-disabled.is-checked .ly-radio__inner {
    background-color: #F2F6FC;
    border-color: #DCDFE6
  }

  .ly-checkbox__input.is-disabled.is-checked .ly-checkbox__inner::after,
  .ly-radio__input.is-disabled.is-checked .ly-radio__inner::after {
    border-color: #C0C4CC
  }

  .ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner {
    background-color: #F2F6FC;
    border-color: #DCDFE6
  }

  .ly-checkbox__input.is-disabled.is-indeterminate .ly-checkbox__inner::before {
    background-color: #C0C4CC;
    border-color: #C0C4CC
  }

  .ly-checkbox__input.is-checked .ly-checkbox__inner,
  .ly-radio__input.is-checked .ly-radio__inner,
  .ly-checkbox__input.is-indeterminate .ly-checkbox__inner {
    background-color: #38C09E;
    border-color: #38C09E
  }

  .ly-checkbox__input.is-disabled+text.ly-checkbox__label,
  .ly-radio__input.is-disabled+text.ly-radio__label {
    color: #C0C4CC;
    cursor: not-allowed
  }

  .ly-checkbox__input.is-checked .ly-checkbox__inner::after,
  .ly-radio__input.is-checked .ly-radio__inner::after {
    -webkit-transform: rotate(45deg) scaleY(1);
    transform: rotate(45deg) scaleY(1)
  }

  .ly-checkbox__input.is-checked+.ly-checkbox__label,
  .ly-radio__input.is-checked+.ly-radio__label {
    color: #38C09E
  }

  .ly-checkbox__input.is-focus .ly-checkbox__inner,
  .ly-radio__input.is-focus .ly-radio__inner {
    border-color: #38C09E
  }

  .ly-checkbox__input.is-indeterminate .ly-checkbox__inner::before {
    content: '';
    position: absolute;
    display: block;
    background-color: #FFF;
    height: .6rem;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    left: 0;
    right: 0;
    top: 1rem
  }

  .ly-checkbox__input.is-indeterminate .ly-checkbox__inner::after {
    display: none
  }

  .ly-checkbox__inner,
  .ly-radio__inner {
    display: inline-block;
    position: relative;
    border: .2rem solid #DCDFE6;
    border-radius: 4rpx;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 2.8rem;
    height: 2.8rem;
    background-color: #FFF;
    z-index: 1;
    -webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
    transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46)
  }

  .ly-radio__inner {
    border-radius: 50%;
    width: 34rpx !important;
    height: 34rpx !important;
  }

  .ly-checkbox__inner::after,
  .ly-radio__inner::after {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    content: "";
    border: .2rem solid #FFF;
    border-left: 0;
    border-top: 0;
    height: 1.4rem;
    left: 1rem;
    position: absolute;
    top: .2rem;
    -webkit-transform: rotate(45deg) scaleY(0);
    transform: rotate(45deg) scaleY(0);
    width: .6rem;
    -webkit-transition: -webkit-transform .15s ease-in .05s;
    transition: -webkit-transform .15s ease-in .05s;
    transition: transform .15s ease-in .05s;
    transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
    -webkit-transform-origin: center;
    transform-origin: center
  }

  .ly-radio__inner::after {
    left: 1.2rem !important;
    top: .6rem !important;
  }

  /* lyRadio/lyCheckbox-end */
</style>
